<!-- 萤石云 -->
<template>
    <div class="div_box">
        <!-- 使用 v-if 来控制 el-dialog 的显示和销毁 -->
        <el-dialog title="视频详情" :visible.sync="dialogVisible" v-if="dialogVisible" width="1200px" top="8vh"
            :close-on-click-modal="false" @close="cancelAddDia" :modal-append-to-body="false" :modal="true">
            <span slot="title" class="dialog-title">
                <div class="title">视频详情</div>
            </span>
            <div class="div_left">
                <div class="camara_box">
                    <div id="video-container" class="camara_video"></div>
                </div>

                <div class="webplayer_menu">
                    <div class="webplayer-menu--left">
                        <el-tooltip class="item" effect="dark" content="播放" placement="bottom" v-show="stopPromiseshow">
                            <i class="el-icon-video-play" id="playerResumeButton" @click="play"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="暂停" placement="bottom"
                            v-show="!stopPromiseshow">
                            <i class="el-icon-video-pause" id="playerPauseButton" style="color: #7367F0;"
                                @click="stop"></i>
                        </el-tooltip>
                    </div>
                    <div class="webplayer-menu--right">
                        <i class="iconfont huatong" id="audioTalkStop" style="color: #7367F0;" @click="ezopenStopTalk"
                            v-show="!startTalkshow"></i>
                        <i class="iconfont huatong1" id="audioTalkStart" @click="ezopenStartTalk"
                            v-show="startTalkshow"></i>

                        <i class="iconfont guanbiyinliang" @click="openSound" v-show="openSoundPromiseshow"></i>
                        <i class="iconfont zengdayinliang" @click="closeSound" style="color: #7367F0;"
                            v-show="!openSoundPromiseshow"></i>

                        <el-tooltip class="item" effect="dark" content="截图" placement="bottom">
                            <i class="iconfont qiepianjietu" @click="capturePicture"></i>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
                            <i class="iconfont quanping" @click="fullScreen"></i>
                        </el-tooltip>

                    </div>
                </div>

                <div class="div_right">
                    <div class="video-ctrl-box">
                        <i class="el-icon-caret-left" @mousedown='leftClick' @mouseup='mouseupClick'></i>
                        <i class="el-icon-caret-right" @mousedown='rightClick' @mouseup='mouseupClick'></i>
                        <i class="el-icon-caret-bottom" @mousedown='bottomClick' @mouseup='mouseupClick'></i>
                        <i class="el-icon-caret-top" @mousedown='topClick' @mouseup='mouseupClick'></i>
                        <div class="ctrl-circle">控制台</div>
                    </div>
                </div>

                <div class="div_zoom">
                    <div @mousedown='lessen' @mouseup='mouseupClick'>-</div>
                    <div>缩放</div>
                    <div @mousedown='magnify' @mouseup='mouseupClick'>+</div>
                </div>

                <div class="div_focal">
                    <div @mousedown='near' @mouseup='mouseupClick'>-</div>
                    <div>焦距</div>
                    <div @mousedown='distant' @mouseup='mouseupClick'>+</div>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script>
import EZUIKit from "ezuikit-js";//引用萤石云播放器插件 指定版本

export default {
    props: [],
    components: {
    },
    data() {
        return {
            dialogVisible: false,
            // 视频控制设置
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "video/mp4", // 类型
                        // src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", // url地址
                        src: "", // url地址
                    },
                ],
                poster: "", // 封面地址
                width: "1000", //document.documentElement.clientWidth 播放器宽度
                height: 100,
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                    volumeControl: true, // 声音控制键
                    playToggle: true, // 暂停和播放键
                    progressControl: true, // 进度条
                },
            },
            player: null,
            live: 1,
            beishu: "1.0",
            openSoundPromiseshow: false,
            stopPromiseshow: true,
            startTalkshow: true,
        };
    },
    computed: {},
    watch: {

    },
    methods: {
        // 从回放回到直播
        zhibo() {
            this.live = 1
            let isRecord = this.webPlayer.isRecord();
            if (isRecord) {
                this.webPlayer.play();//播放直播
            }
        },
        // 倍数
        onDropdown(e) {
            // console.log(e);
            switch (e) {
                case "0.5":
                    this.beishu = 0.5
                    var value = 0.5; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
                case "1.0":
                    this.beishu = 1.0
                    var value = 1.0; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
                case "1.5":
                    this.beishu = 1.5
                    var value = 1.5; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
                case "2.0":
                    this.beishu = 2.0
                    var value = 2.0; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
            }
        },
        // 全屏
        fullScreen() {
            this.player.fullScreen();
        },
        // 暂停
        stop() {
            var stopPromise = this.player.stop();
            stopPromise.then((data) => {
                // console.log("promise 获取 数据", data);
                this.stopPromiseshow = true;
            });
        },
        // 播放
        play() {
            var playPromise = this.player.play();
            playPromise.then((data) => {
                // console.log("promise 获取 数据", data);
                this.stopPromiseshow = false;
            });
        },
        // 截图
        capturePicture() {
            var capturePicturePromise = this.player.capturePicture(
                `${new Date().getTime()}`
            );
            capturePicturePromise.then((data) => {
                // console.log("promise 获取 数据", data);
            });
        },
        // 打开声音
        openSound() {
            var openSoundPromise = this.player.openSound();
            openSoundPromise.then((data) => {
                console.log("打开声音", data);
                this.openSoundPromiseshow = false;
                // fetch(`https://open.ys7.com/api/lapp/building/device/audio/config?accessToken=${this.accessToken}&deviceSerial=33010468992637119318:33010344991327006295&type=0&value=3`, {
                //     method: "POST",
                // })
                //     .then(response => response.json())
                //     .then(res => {
                //         console.log(res);
                //     });
            });
        },
        // 关闭声音
        closeSound() {
            var openSoundPromise = this.player.closeSound();
            openSoundPromise.then((data) => {
                console.log("关闭声音", data);
                this.openSoundPromiseshow = true;
            });
        },
        // 开始对讲
        ezopenStartTalk() {
            this.player.startTalk();
            this.startTalkshow = false;
            // fetch(`https://open.ys7.com/api/lapp/camera/video/sound/set?accessToken=${this.accessToken}&deviceSerial=${this.sn}&enable=1`, {
            //         method: "POST",
            //     })
            //         .then(response => response.json())
            //         .then(res => {
            //             console.log(res);
            //         });
        },
        // 结束对讲
        ezopenStopTalk() {
            this.player.stopTalk();
            this.startTalkshow = true;
        },
        // 开始录制
        startSave() {
            var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
            startSavePromise.then((data) => {
                console.log("promise 获取 数据", data);
            });
        },
        // 结束录制
        stopSave() {
            var stopSavePromise = this.player.stopSave();
            stopSavePromise.then((data) => {
                console.log("promise 获取 数据", data);
            });
        },
        // 放大
        magnify() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=8&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        // 缩小
        lessen() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=9&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        // 近焦距
        near() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=10&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        // 远焦距
        distant() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=11&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        // 点击取消和关闭按钮
        cancelAddDia() {
            this.dialogVisible = false;
            if(this.playerEZUIKit){
                this.destroy()//销毁播放器
            }
        },
        // 销毁
        destroy() {
            var stopPromise = this.player.stop();
            stopPromise.then((data) => {
                // console.log("promise 获取 数据", data);
            });
        },
        leftClick() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=2&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        rightClick() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=3&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        topClick() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=0&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        bottomClick() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/start?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1&direction=1&speed=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        // 停止云台控制
        mouseupClick() {
            fetch(`https://open.ys7.com/api/lapp/device/ptz/stop?accessToken=${this.accessToken}&deviceSerial=${this.sn}&channelNo=1`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                });
        },
        // 获取token
        gettoken(e) {
            this.sn = e.sn
            fetch(`https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                    this.accessToken = res.data.accessToken;
                    this.getaddress()
                });
        },
        playback() {
            fetch(`https://open.ys7.com/api/lapp/cloud/v2/storage/device/info?accessToken=${this.accessToken}&deviceSerial=${this.sn}`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    console.log(res);
                });
        },
        // 获取播放地址接口
        getaddress() {
            fetch(`https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.sn}&supportH265=1&quality=2`, {
                method: "POST",
            })
                .then(response => response.json())
                .then(res => {
                    // console.log(res);
                    if (res.code != 200) return this.$modal.notifyWarning(res.msg);
                    let player = new EZUIKit.EZUIKitPlayer({
                        id: 'video-container', // 视频容器ID
                        accessToken: this.accessToken,
                        url: res.data.url,
                        useHardDev: true, //开启高性能模式
                        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
                        // template: 'pcLive-pc',
                        plugin: ['talk'], // 加载插件，talk-对讲
                        // width: 800,
                        // height: 400,
                    });
                    if (player) {
                        this.stopPromiseshow = false;
                    }
                    this.player = player;
                });
        }
    },
    async created() { },
    mounted() { },
};
</script>

<style lang="less" scoped>
.div_box {
    overflow: auto;
    width: 100%;
    display: flex;
    justify-content: center;

    .div_left {
        width: 75%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .camara_box {
            width: 100%;
            height: 60vh;
            background: black;
            position: relative;
            box-sizing: border-box;
            cursor: pointer;

            .camara_video {
                z-index: 1;
                width: 100%;
                height: 100%;
            }

            .none {
                color: #cfd3ec38;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 0;
                font-size: 16px;
            }
        }

        .webplayer_menu {
            background: #0f2c82;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 55px;
            padding: 0 16px;
            box-sizing: border-box;
            position: relative;

            i {
                font-size: 30px;
                cursor: pointer;
            }

            .webplayer-menu--left {
                width: 50%;

                i {
                    color: #f1f1f1;
                }
            }

            .webplayer-menu--right {
                width: 50%;
                // padding-left: 10.5%;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                i {
                    margin-left: 28px;
                }
            }
        }

        .huifang {
            display: flex;
            background-color: #e8e8e8;
            border-radius: 20px;
            // margin: 3% auto;
            margin-top: 2%;
            margin-bottom: 2%;

            >div {
                width: 65px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                color: #000000;
                cursor: pointer;

                &:hover {
                    color: #409eff;
                }
            }
        }

        .slot_tips_h5player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            background: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            display: flex;
            // color: rgba(255, 255, 255, 0.8) !important;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            i {
                font-size: 60px;
            }

            span {
                margin: 7px;
                font-size: 16px;
            }
        }
    }

    .playback {
        position: absolute;
        right: -30%;
        width: 30%;
        top: 55%;
        height: 32vh;
        overflow-y: auto;
        text-align: center;

        >div {
            width: 100%;
            height: 150px;
            padding-bottom: 15px;
            margin-bottom: 20px;

            video {
                width: 100%;
                height: 100%;
            }
        }
    }

    .div_right {
        position: absolute;
        right: -30%;
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #5d596c;
        top: 30%;
    }

    .div_zoom {
        position: absolute;
        right: -30%;
        width: 25%;
        top: 55%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;

        >div:nth-of-type(2) {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #FFFFFF;
        }

        >div:first-of-type {
            width: 26px;
            height: 26px;
            background: #02C3FF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
        }

        >div:last-of-type {
            width: 26px;
            height: 26px;
            background: #02C3FF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
        }
    }

    .div_focal {
        position: absolute;
        right: -30%;
        width: 25%;
        top: 65%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;

        >div:nth-of-type(2) {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #FFFFFF;
        }

        >div:first-of-type {
            width: 26px;
            height: 26px;
            background: #02C3FF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
        }

        >div:last-of-type {
            width: 26px;
            height: 26px;
            background: #02C3FF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
        }
    }
}

::v-deep .video-player {
    // width: 100vw !important;
    width: 100% !important;
}

.video-ctrl-box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(0, 62, 112, 0.2);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    .ctrl-circle {
        position: absolute;
        width: 70px;
        height: 70px;
        background: #506ab8bd;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f1f1f1;
    }

    i {
        cursor: pointer;
        position: absolute;
        color: #02c3ff;

        &:active {
            color: #409eff;
        }
    }

    .el-icon-caret-left {
        top: 47%;
        left: 27px;
        transform: translateX(-50%) scale(2);
    }

    .el-icon-caret-right {
        top: 48%;
        right: 11px;
        transform: translateX(-50%) scale(2);
    }

    .el-icon-caret-top {
        left: 50%;
        transform: translateX(-50%) translateY(17px) scale(2);
    }

    .el-icon-caret-bottom {
        left: 50%;
        bottom: 35px;
        transform: translateX(-50%) translateY(16px) scale(2);
    }
}

::v-deep .el-dialog__header {
    display: block !important;
    background: #354895;
    border-bottom: 1px solid #06b1e7;

    .el-dialog__title {
        color: #f1f1f1;
    }
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #f1f1f1;
    font-size: 20px;
}

::v-deep .el-dialog__body {
    background: #384e91 !important;
    color: #f1f1f1;
    min-height: 65vh !important;
}

::v-deep .el-dialog {
    //   border: 2px solid #06b1e7;
    //   box-shadow: 0px 0px 10px #06b1e7;
}

.dialog-title {
    display: flex;
    justify-content: center;
    width: 100%;

    .title {
        color: #4eaef2 !important;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        margin-left: 6px;
    }
}
</style>